<!--
 * @Author: pjji
 * @describe: 文件预览组件
 * @Date: 2020-06-18 17:44:41
 * @LastEditTime: 2020-12-07 09:46:11
--> 

<template>
	<div id="filePreview">
		<!-- 默认展示附件名 -->
		<div v-if="type == 'text'"
			 class="image__preview f-vam">
			<span class="text f-ib f-vam f-push-10-l"
				  @click="preview">{{fileName}}</span>
			<el-image-viewer v-if="isPreview"
							 :on-close="closeViewer"
							 :url-list="srcList" />
		</div>
		<!-- 默认展示小图 -->
		<el-image v-if="type == 'img'"
				  class="img f-vam"
				  :src="src"
				  :preview-src-list="[src]">
		</el-image>
		<span v-if="filePath"
			  class="el-icon-download download f-tar f-vam f-push-20-l"
			  title="点击下载附件"
			  @click="downloadFile"></span>
	</div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import downloadFile from '@/assets/js/downloadFile'; //文件下载
export default {
	name: 'filePreview',
	components: { ElImageViewer },
	props: {
		// 预览地址  text 文本 img 图片 
		type: {
			type: String,
			default: 'text',
		},
		filePath: {
			type: String,
			default: '',
		},
		fileName: {
			type: String,
			default: '',
		},
		// 预览地址
		src: {
			type: String,
			default: '',
		}
	},
	data () {
		return {
			isPreview: false,
			srcList: []
		}
	},
	methods: {
		preview () {
			this.isPreview = true;
			this.srcList[0] = this.src;
		},
		//下载
		downloadFile () {
			downloadFile(
				`${process.env.VUE_APP_BASE_URL}/fastdfs/download`,
				{
					filePath: this.filePath
				}
			);
		},
		closeViewer () {
			this.isPreview = false;
		},
	},
	mounted () { },
}
</script>
<style lang="scss" scoped>
#filePreview {
	cursor: pointer;
	color: #fff;
	.img {
		width: 100px;
		height: 100px;
	}
	.text {
		color: #409eff;
	}
	.image__preview {
		display: inline-block;
	}
	.download {
		display: inline-block;
		font-size: 20px;
		font-weight: bold;
		color: #67c23a;
	}
}
</style>
